<template>
  <div class="right">
    <div class="people-sex">
      <h2 class="chart-title">烟感系统</h2>
      <div class="sex-chart" id="yanganxitong">
        <ve-pie :data="chartDataYangan" :settings="chartSettings" :theme="theme"  :extend="chartExtend"></ve-pie>

      </div>

    </div>
    <div class="dianqihuozai">
      <h2 class="chart-title">消防水源</h2>
      <div class="dianqihuozai-chart" id="xiaofangshuiyuan">
        <ve-pie :data="chartDataShuiyuan" :settings="chartSettings" :theme="theme"  :extend="chartExtend"></ve-pie>
      </div>

    </div>

  </div>
</template>
<script>
  import VPie from 'v-charts/lib/pie.common'
  export default {
    name: 'left',
    components: {
      VPie
    },
    data () {
      return {
        'theme': {
          'backgroundColor': 'rgba(51,51,51,0.2)',
          label: {
            fontSize: 20
          },
          legend: {
            textStyle: {
              fontSize: 25,
              color: '#fff'
            }
          }
        },
        chartExtend: {
          legend: {
            orient: 'vertical',
            left: 'left',
            top: 'top'
          }
        },
        chartSettings: {
          radius: 150,
          level: [
            ['已处理', '未处理'],
            ['在线', '离线']
          ]
        },
        chartDataYangan: {
          columns: ['状态', '数量'],
          rows: [
            { '状态': '在线', '数量': 0 },
            { '状态': '离线', '数量': 0 },
            { '状态': '已处理', '数量': 0 },
            { '状态': '未处理', '数量': 0 }
          ]
        },
        chartDataShuiyuan: {
          columns: ['状态', '数量'],
          rows: [
            { '状态': '在线', '数量': 0 },
            { '状态': '离线', '数量': 0 },
            { '状态': '已处理', '数量': 0 },
            { '状态': '未处理', '数量': 0 }
          ]
        }
      }
    },
    mounted () {
      const self = this
      self.dealDevice()
      self.dealError()
      self.refresh()
    },
    methods: {
      dealDevice () {
        this.postRequest('Analysis/deviceStatus', {
          devType: '0'
        }).then((res) => {
          console.log('左侧设备刷新')
          res.data.data.forEach((item) => {
            if (item.devType === 10) {
              this.chartDataXiaofang.rows[0].数量 = item.onlineCount
              this.chartDataXiaofang.rows[1].数量 = item.deviceCount - item.onlineCount
            } else if (item.devType === 11) {
              this.chartDataDianqi.rows[0].数量 = item.onlineCount
              this.chartDataDianqi.rows[1].数量 = item.deviceCount - item.onlineCount
            }
          })
        })
      },
      dealError () {
        this.postRequest('Analysis/errorCount', {
          devType: '0'
        }).then((res) => {
          console.log('左侧隐患刷新')
          res.data.data.forEach((item) => {
            if (item.devType === 10) {
              console.log(item)
              this.chartDataXiaofang.rows[2].数量 = item.unprocess
              this.chartDataXiaofang.rows[3].数量 = item.processed
            } else if (item.devType === 11) {
              this.chartDataDianqi.rows[2].数量 = item.unprocess
              this.chartDataDianqi.rows[3].数量 = item.processed
            }
          })
        })
      },
      refresh () {
        setInterval(this.dealError, 200000)
        setInterval(this.dealDevice, 200000)
      }
    }
  }
</script>
<style scoped>
  .people-sex {
    position: absolute;
    top: 220px;
    left: 70px;
    width: 540px;
    height: 516px;
    background: url(../../../assets/images/common/tip-title-bg.png) no-repeat top left;
  }

  .dianqihuozai {
    position: absolute;
    top: 830px;
    left: 70px;
    width: 540px;
    height: 516px;
    background: url(../../../assets/images/common/tip-title-bg.png) no-repeat top left;
  }

  .sex-chart {
    margin-top: 70px;
  }

  .dianqihuozai-chart {
    margin-top: 70px;
  }

  .sex-legend {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
  }

  .sex-legend p {
    font-size: 38px;
    color: #fff;
    padding-left: 40px;
    line-height: 1.5;
  }

  .sex-legend p span {
    color: #44ff86;
    font-size: 40px;
    margin: 0 12px 0 8px;
  }

  .sex-legend p em {
    color: #44ff86;
    font-size: 28px;
  }

  .sex-legend .male {
    background: url(../../../assets/images/fantasy/castle/male-legend.png) no-repeat left center;
  }

  .sex-legend .female {
    background: url(../../../assets/images/fantasy/castle/female-legend.png) no-repeat left center;
  }


</style>
